use crate::components::clear::Clear;
use dioxus::prelude::*;

#[component]
pub fn UrlFormat() -> Element {
    let mut url_input = use_signal(|| String::new());
    let mut parsed_query = use_signal(|| Vec::<(String, String)>::new());

    let mut parse_url = move || {
        let input = url_input.read();
        if let Ok(url) = url::Url::parse(&input) {
            let pairs = url
                .query_pairs()
                .map(|(k, v)| (k.to_string(), v.to_string()))
                .collect::<Vec<_>>();
            parsed_query.set(pairs);
        } else {
            parsed_query.set(Vec::new());
        }
    };

    // 清空时自动清空解析结果
    use_memo(move || {
        if url_input.read().is_empty() {
            parsed_query.set(Vec::new());
        }
    });

    rsx! {
        div { class: "flex-1 flex flex-col",
            div { class: "flex-1 p-8 overflow-auto",
                div { class: "max-w-4xl mx-auto space-y-6",
                    div { class: "space-y-2",
                        h1 { class: "text-2xl font-bold text-gray-900", "URL 参数解析" }
                        p { class: "text-gray-600", "输入带查询参数的链接，提取参数为表格显示。" }
                    }
                    div { class: "bg-card text-card-foreground border border-gray-200 rounded-2xl shadow-sm",
                        div { class: "p-6",
                            div { class: "space-y-4",
                                div { class: "space-y-2",
                                    label { class: "text-sm font-medium text-gray-700", "粘贴链接：" }
                                    textarea {
                                        oninput: move |e| url_input.set(e.value()),
                                        value: url_input,
                                        spellcheck: "false",
                                        autocapitalize: "off",
                                        autocomplete: "off",
                                        placeholder: "https://example.com/page?foo=bar&baz=qux",
                                        class: "flex w-full border bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px] rounded-xl border-gray-200 resize-none font-mono text-sm",
                                    }
                                }
                            }

                            div { class: "flex items-center space-x-3 mt-6",
                                button {
                                    onclick: move |_| parse_url(),
                                    class: "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [\u{0026}amp;_svg]:pointer-events-none [\u{0026}amp;_svg]:size-4 [\u{0026}amp;_svg]:shrink-0 h-10 bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-xl transition-all duration-200",
                                    "解析"
                                }

                                Clear {
                                    targets: vec![url_input.clone()],
                                }
                            }
                        }
                    }

                    if !parsed_query.read().is_empty() {
                        div { class: "bg-white border border-gray-200 rounded-2xl shadow-sm",
                            div { class: "p-6 overflow-x-auto space-y-4",
                                h2 { class: "text-sm text-gray-500", "原始链接：" }
                                p { class: "text-sm text-blue-700 break-words font-mono", "{url_input.read()}" }

                                table {
                                    class: "min-w-full text-sm table-auto border rounded-md overflow-hidden",
                                    thead {
                                        tr { class: "bg-gray-100 border-b",
                                            th { class: "text-left font-semibold text-gray-800 pr-4 py-2", "Key" }
                                            th { class: "text-left font-semibold text-gray-800 py-2", "Value" }
                                        }
                                    }
                                    tbody {
                                        for (i, (key, val)) in parsed_query.read().iter().enumerate() {
                                            tr {
                                                class: if i % 2 == 0 {
                                                    "bg-white hover:bg-gray-50"
                                                } else {
                                                    "bg-gray-50 hover:bg-gray-100"
                                                },
                                                td { class: "text-gray-900 pr-4 py-2", "{key}" }
                                                td { class: "text-gray-700 py-2", "{val}" }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
